<ng-form name="$ctrl.editEnvironmentFromForm" novalidate ng-class="{ 'has-sort' : !$ctrl.cannotSort && $ctrl.entries.length > 1}">
  <div ng-if="$ctrl.showHeader" class="row form-row-has-controls input-labels">
    <div class="col-xs-6">
      <label class="input-label">
        Config Map/Secret
      </label>
    </div>
    <div class="col-xs-6"
        ng-if="!$ctrl.isEnvFromReadonly() && $ctrl.hasOptions()">
      <label class="input-label">
        Prefix
        <small class="pficon pficon-help tooltip-default-icon"
               aria-hidden="true"
               data-toggle="tooltip"
               data-original-title="Optional prefix added to each environment variable name. A valid prefix is an alphanumeric (a-z and 0-9) string beginning with a letter that may contain underscores."></small>
      </label>
    </div>
  </div>

  <div ng-model="$ctrl.entries" class="environment-from-editor" as-sortable="$ctrl.dragControlListeners">
    <div class="environment-from-entry row form-row-has-controls"
      ng-class-odd="'odd'"
      ng-class-even="'even'"
      ng-repeat="entry in $ctrl.envFromEntries"
      as-sortable-item>

      <div class="environment-from-input col-xs-6 form-group">
        <div ng-if="$ctrl.isEnvFromReadonly(entry) || !$ctrl.hasOptions()" class="faux-input-group">
          <div ng-if="!entry.configMapRef.name && !entry.secretRef.name">
            No config maps or secrets have been added as Environment From.
          </div>
          <div ng-if="entry.configMapRef.name || entry.secretRef.name" class="faux-form-control readonly">
            Use all keys and values from
            <span ng-if="entry.configMapRef.name">config map {{entry.configMapRef.name}}.</span>
            <span ng-if="entry.secretRef.name">secret {{entry.secretRef.name}}.</span>
            <span ng-if="entry.prefix">Names will be prefixed with "{{entry.prefix}}"</span>
          </div>
        </div>

        <div ng-if="!$ctrl.isEnvFromReadonly(entry) && $ctrl.hasOptions()">
          <div class="ui-select">
            <ui-select ng-model="entry.selectedEnvFrom"
                       ng-required="entry.selectedEnvFrom"
                       on-select="$ctrl.envFromObjectSelected($index, entry, $select.selected)"
                       ng-class="{'{{$ctrl.setFocusClass}}' : $last}">
              <ui-select-match placeholder="Select a resource">
                <span>
                  {{$select.selected.metadata.name}}
                  <small class="text-muted">&ndash; {{$select.selected.kind | humanizeKind : true}}</small>
                </span>
              </ui-select-match>
              <ui-select-choices
                repeat="source in $ctrl.envFromSelectorOptions | filter : { metadata: { name: $select.search } } track by (source | uid)"
                group-by="$ctrl.groupByKind">
                <span ng-bind-html="source.metadata.name | highlight : $select.search"></span>
              </ui-select-choices>
            </ui-select>
          </div>
          <div class="has-warning" ng-if="$ctrl.hasInvalidEnvVar(entry.selectedEnvFrom.data)">
            <div class="help-block">{{entry.selectedEnvFrom.kind | humanizeKind | upperFirst}} <strong>{{entry.selectedEnvFrom.metadata.name}}</strong> contains keys that are not valid environment variable names. Only {{entry.selectedEnvFrom.kind | humanizeKind}} keys with valid names will be added as environment variables.
            </div>
          </div>
        </div>
      </div>

      <div class="environment-from-input col-xs-6 form-group">
        <div class="row">
          <div class="col-sm-6">
            <div class="environment-from-input"
                 ng-if="!$ctrl.isEnvFromReadonly(entry) && $ctrl.hasOptions()"
                 ng-class="{ 'has-error': ($ctrl.editEnvironmentFromForm['envfrom-prefix-'+$index].$invalid && $ctrl.editEnvironmentFromForm['envfrom-prefix-'+$index].$touched) }">
              <label for="envfrom-prefix-{{$index}}" class="sr-only">Prefix</label>
              <input type="text"
                     class="form-control"
                     placeholder="Add prefix"
                     id="envfrom-prefix-{{$index}}"
                     name="envfrom-prefix-{{$index}}"
                     ng-model="entry.prefix"
                     ng-pattern="/^[A-Za-z_][A-Za-z0-9_]*$/">

              <span ng-show="$ctrl.editEnvironmentFromForm['envfrom-prefix-'+$index].$touched">
                <span class="help-block key-validation-error"
                      ng-show="$ctrl.editEnvironmentFromForm['envfrom-prefix-'+$index].$error.pattern">
                  <span class="validation-text">Please enter a valid prefix.</span>
                </span>
              </span>
            </div>
          </div>
          <div class="col-sm-6">
            <div class="environment-from-view-details" ng-if="entry.selectedEnvFrom">
              <a href=""
                ng-click="$ctrl.viewOverlayPanel(entry.selectedEnvFrom)">View Details</a>
            </div>
          </div>
        </div>

        <div ng-if="!$ctrl.isEnvFromReadonly(entry) && $ctrl.hasEntries()" class="environment-from-editor-button form-row-controls">
          <button ng-if="!$ctrl.cannotSort && $ctrl.entries.length > 1"
            class="sort-row"
            type="button"
            aria-hidden="true"
            aria-grabbed="false"
            as-sortable-item-handle>
            <span class="fa fa-bars"></span>
            <span class="sr-only">Move row</span>
          </button>
          <button
            ng-if="!$ctrl.cannotDeleteAny"
            class="btn-remove close delete-row as-sortable-item-delete"
            type="button"
            aria-hidden="true"
            ng-click="$ctrl.deleteEntry($index, 1)">
            <span class="pficon pficon-close" aria-hidden="true"></span>
            <span class="sr-only">Delete row</span>
          </button>
        </div>
      </div>
    </div>

    <div class="environment-from-entry" ng-if="!$ctrl.isEnvFromReadonly() && $ctrl.hasOptions()">
      <a
        href=""
        class="add-row-link"
        role="button"
        ng-click="$ctrl.onAddRow()">Add ALL Values from Config Map or Secret</a>
    </div>
  </div>

  <overlay-panel class="overlay-panel-as-modal add-config-to-application" show-panel="$ctrl.overlayPanelVisible" handle-close="$ctrl.closeOverlayPanel">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true" aria-label="Close" ng-click="$ctrl.closeOverlayPanel()">
        <span class="pficon pficon-close"></span>
      </button>
      <h1 class="modal-title">{{$ctrl.overlayPaneEntryDetails.kind | humanizeKind : true}} Details</h1>
    </div>
    <div class="modal-body">
      <h4>{{$ctrl.overlayPaneEntryDetails.metadata.name}}
        <small ng-if="$ctrl.overlayPaneEntryDetails.kind === 'Secret'" class="mar-left-sm">
          <a href=""
             role="button"
             ng-click="$ctrl.showSecret = !$ctrl.showSecret">{{$ctrl.showSecret ? "Hide" : "Reveal"}} Secret</a>
        </small>
      </h4>

      <div ng-if="!($ctrl.overlayPaneEntryDetails.data | size)" class="empty-state-message text-center">
        The {{$ctrl.overlayPaneEntryDetails.kind | humanizeKind}} has no properties.
      </div>

      <div ng-if="$ctrl.overlayPaneEntryDetails.data | size" class="table-responsive scroll-shadows-horizontal">
        <table class="table table-bordered table-bordered-columns config-map-table key-value-table">
          <tbody>
            <tr ng-repeat="(key, value) in $ctrl.decodedData">
              <td class="key">
                {{key}}
                <span ng-if="$ctrl.isEnvVarInvalid(key)" class="pficon pficon-warning-triangle-o tooltip-default-icon" data-toggle="popover" data-trigger="hover" dynamic-content="{{key}} is not a valid environment variable name and will not be added."></span>
              </td>
              <td class="value">
                <truncate-long-text
                  ng-if="$ctrl.overlayPaneEntryDetails.kind === 'ConfigMap'"
                  content="value"
                  limit="50"
                  newline-limit="2"
                  expandable="true">
                </truncate-long-text>

                <span ng-if="!$ctrl.showSecret && $ctrl.overlayPaneEntryDetails.kind === 'Secret'">&#42;&#42;&#42;&#42;&#42;</span>
                <div ng-if="$ctrl.showSecret && $ctrl.overlayPaneEntryDetails.kind === 'Secret'">
                  <truncate-long-text
                    content="value"
                    limit="50"
                    newline-limit="2"
                    expandable="true">
                  </truncate-long-text>
                  <div ng-if="decodedData.$$nonprintable[key]" class="help-block">
                    This secret value contains non-printable characters and is displayed as a Base64-encoded string.
                  </div>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div class="modal-footer">
      <button ng-click="$ctrl.closeOverlayPanel()"
              type="button"
              class="btn btn-default">Close</button>
    </div>
  </overlay-panel>
</ng-form>
